<template>
  <div class="mobile-menu" :class="{ 'menu-open': isOpen }">
    <div class="mobile-overlay" @click="closeMenu"></div>
    <div class="mobile-menu-content bg-bg-secondary">
      <div
        class="p-4 flex justify-between items-center border-b border-opacity-10 border-text-secondary"
      >
        <div class="flex items-center gap-2">
          <n-icon size="24" class="text-primary">
            <BookOutline />
          </n-icon>
          <h1 class="text-xl font-bold text-text-primary">
            博客 <span class="text-primary">简历</span>
          </h1>
        </div>
        <n-button quaternary circle @click="closeMenu">
          <n-icon size="20">
            <CloseOutline />
          </n-icon>
        </n-button>
      </div>
      <div class="p-4">
        <div class="mobile-nav">
          <NuxtLink
            v-for="(item, index) in navItems"
            :key="index"
            :to="item.path"
            class="mobile-nav-link"
            @click="closeMenu"
          >
            {{ item.name }}
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { BookOutline, CloseOutline } from "@vicons/ionicons5";

const isOpen = defineModel("isOpen");
const navItems = [
  { name: "首页", path: "/" },
  { name: "简历", path: "/resume" },
  { name: "博客", path: "/blog" },
  { name: "作品集", path: "/portfolio" },
  { name: "关于", path: "/about" },
];

function closeMenu() {
  isOpen.value = false;
}
</script>

<style scoped>
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.mobile-menu.menu-open {
  visibility: visible;
  pointer-events: auto;
}

.mobile-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.menu-open .mobile-overlay {
  opacity: 1;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.menu-open .mobile-menu-content {
  transform: translateX(0);
}

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mobile-nav-link {
  display: block;
  padding: 12px 0;
  font-size: 18px;
  color: var(--text-primary);
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--border-color-rgb), 0.1);
  transition: color 0.2s ease;
}

.mobile-nav-link:hover {
  color: var(--primary-color);
}

@media (max-width: 480px) {
  .mobile-menu-content {
    width: 90%;
  }

  .mobile-nav-link {
    padding: 14px 0;
    margin-bottom: 4px;
  }
}

.mobile-nav-link.router-link-active {
  color: var(--primary-color);
  padding-left: 8px;
}
</style>
